<script setup>
import { RouterView } from "vue-router";
import router from "../router/index.js";
import { ref, reactive } from "vue";
import request from "../utils/request.js";
import { useUserStore } from "../stores/user.js";

const spendList = reactive([]);
const userId = ref();
userId.value = useUserStore().getUser.id;

const showlist = () => {
  request.get("/selectAllById/" + userId.value).then((res) => {
    if (res.code === "200") {
      spendList.value = res.data;
      // console.log(res.data);
    }
  });
};

showlist();

const goback =() =>{
  router.go(-1)
}
</script>

<template>
  <div class="spendlist">
    <div style="margin-top:10px; margin-bottom:20px">
      <span style="font-size:20px; font-weight:bold">消费记录</span>
    </div>

    <el-table :data="spendList.value" style="width: 100%">
      <el-table-column prop="userName" label="用户名" width="180" />
      <el-table-column label="变动详情" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div v-if="scope.row.biaoji">充值了￥{{ scope.row.recharge }}</div>
            <div v-if="scope.row.biaoji === 0">
              购买了书籍《{{ scope.row.consumeBookName }}》
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="余额变动" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div v-if="scope.row.biaoji">+{{ scope.row.balancechange }}</div>
            <div v-if="scope.row.biaoji === 0">
              -{{ scope.row.balancechange }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="最终余额" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            ￥{{ scope.row.balance }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="变动时间" />
    </el-table>
    <div style="margin-top:20px">
        <el-button type="info" @click="goback()">返回</el-button>
      </div>
  </div>
</template>

<style scoped>
.spendlist {
  width: 1000px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
}
</style>